<template>
  <view
    class="v-tabbar"
    :class="{ border: border }"
  >
    <view class="v-tabbar-fixed">
      <view class="v-tabbar-content">
        <view class="v-tabbar-item">
          <v-tabbar-item
            :active-route="activeRoute"
            url="/pages/index/index"
            icon="@/static/icons/tabbar-home.svg"
            active-icon="@/static/icons/tabbar-home-active.svg"
            label="首页"
          />
        </view>
        <view class="v-tabbar-item">
          <v-tabbar-item
            :active-route="activeRoute"
            url="/pages/category/category-page"
            icon="@/static/icons/tabbar-category.svg"
            active-icon="@/static/icons/tabbar-category-active.svg"
            label="分类"
          />
        </view>
        <view class="v-tabbar-item">
          <v-tabbar-item
            :active-route="activeRoute"
            url="/pages/cart/cart-page"
            icon="@/static/icons/tabbar-cart.svg"
            active-icon="@/static/icons/tabbar-cart-active.svg"
            label="购物车"
          />
        </view>
        <view class="v-tabbar-item">
          <v-tabbar-item
            :active-route="activeRoute"
            url="/pages/user/user-page"
            icon="@/static/icons/tabbar-user.svg"
            active-icon="@/static/icons/tabbar-user-active.svg"
            label="我的"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import vTabbarItem from './v-tabbar-item.vue';

withDefaults(
  defineProps<{
    border?: boolean;
  }>(),
  {
    border: true
  }
);

const activeRoute = ref('');
const getActiveRoute = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  activeRoute.value = currentPage.route as string;
};

onMounted(() => {
  getActiveRoute();
  uni.hideTabBar();
});
onShow(() => {
  uni.hideTabBar();
});
</script>

<style lang="scss" scoped>
.v-tabbar {
  position: relative;
  &.border {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }
  .v-tabbar-fixed {
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0 0;
    .v-tabbar-content {
      display: flex;
      width: 100%;
      .v-tabbar-item {
        flex: 1;
      }
    }
  }
}
</style>
